<template>
  <div class="sex">
    <el-row>
      <el-button icon="el-icon-plus" >添加</el-button>
      <el-button icon="el-icon-delete" >删除</el-button>
    </el-row>
    <el-table :data="tableData" border style="width: 100%" 
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      :row-style="{ 'height': '48px'}"
      height="calc( 100vh - 200px)">
      <el-table-column type="selection" width="55" />
      <el-table-column fixed="left" label="操作" width="150">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="handleClick(scope.row)"
          >编辑</el-button>
        </template>
      </el-table-column>
      <el-table-column fixed prop="number" label="编号" width="150" />
      <el-table-column prop="code" label="编码" width="150" />
      <el-table-column prop="name" label="性别" width="150" />
    </el-table>
    <el-dialog
      title="修改"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form :label-position="labelPosition" label-width="120px">
        <el-form-item label="编码">
          <el-input v-model="inputcode" placeholder="请输入编码" />
        </el-form-item>
        <el-form-item label="性别">
          <!-- <el-input v-model="inputsex" placeholder="请输入性别"></el-input> -->
          <el-select v-model="inputsex" placeholder="请选择性别">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleClose()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      msg: '性别管理',
      labelPosition: 'right',
      dialogVisible: false, // 修改模块显示隐藏
      tableData: [],
      /*
       *
       */
      inputcode: '',
      inputsex: '',
      options: [
        {
          value: '选项1',
          label: '男'
        },
        {
          value: '选项2',
          label: '女'
        },
        {
          value: '选项3',
          label: '未知'
        }
      ]
    }
  },
  methods: {
    handleClick(row) {
      console.log(row)
      this.dialogVisible = true
    },
    handleClose() {
      this.$confirm('确认修改？')
        .then((_) => {
          // done();
          this.dialogVisible = false
        })
        .catch((_) => {})
    }
  }
}
</script>

<style scoped lang="scss">
.sex {
  box-sizing: border-box;
  padding: 30px;
  // max-width: 720px;
  .el-row {
    text-align: left;
  }

  .el-table {
    margin-top: 20px;
  }
}
</style>
